<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品</title>
<link rel="stylesheet" href="/wk1un2/Backstage/lib/layui/css/layui.css" />
</head>
<body>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">商品ID:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="id" name="id" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="name" name="name" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品材质:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="materal" name="materal" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品售价:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="salePrice" name="salePrice" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">市场价:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="markePrice" name="markePrice" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">品牌:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="brand" name="brand" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否组装:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="zuZhuang" name="zuZhuang" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否定制:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="dingZhi" name="dingZhi" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">型号:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="xingHao" name="xingHao" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">颜色:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="color" name="color" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">设计元素:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="yuanSu" name="yuanSu" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">设计风格:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="fengGe" name="fengGe" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">产品款式:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="kuanShi" name="kuanShi" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属产品分类:</label>
			<div class="layui-input-inline"  style="width: 350px;">
			<select name="productTypeId"  id="productTypeId" lay-search="">
					<option value="">点击选取分类名字</option>
					<c:forEach items="${type }" var="t">
					<option value="${t.id }">${t.name }</option>
					</c:forEach>
			</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">产品图片:</label>
			<div class="layui-input-inline" style="width: 350px;">
			<button type="button" class="layui-btn" id="test1">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<img id="imgFace"  style="width:120px" src=""/>
				<input type="text" id="picUrl" name="picUrl" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否显示主页:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="homeFlag" name="homeFlag" required=""
					autocomplete="off" class="layui-input" >
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即添加</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script type="text/javascript"
		src="/wk1un2/Backstage/lib/layui/layui.js"></script>
	<script>
		//Demo
		layui.use(['form','upload'] ,function() {
			var form = layui.form;
			var $ = layui.jquery;
			var upload = layui.upload;
			var uploadInst = upload.render({
			    elem: '#test1' //绑定元素
			    ,url: '/wk1un2/HouProductServlet?method=upload' //上传接口
			    ,done: function(res){
			      //上传完毕回调
			      console.log(res);
			      $("#picUrl").val('upload/' + res.data);
			      $("#imgFace").attr('src', '/wk1un2/upload/' + res.data);
			    }
			    ,error: function(){
			      //请求异常回调
			 
			    }
			  });
			//监听提交
			form.on('submit(formDemo)', function(data) {
				var df = data.field;
				df.method = "add";
				var url = '/wk1un2/HouProductServlet';
				$.post(url, df, function(result) {
					console.log(result.count);
					if (result.count > 0) {
						layer.msg("添加成功");
						var index = parent.layer.getFrameIndex(window.name);
						parent.location.reload();
					} else {
						layer.msg("添加失败");
					}
				}, "json");
				return false;
			});

		});
	</script>
</body>
</html>